<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 数组的方法</title>
</head>
<body>
    <ul id="list">
        <!-- <li>西瓜</li> -->
    </ul>
</body>
<script>
    /*
        数组的方法：https://www.runoob.com/jsref/jsref-obj-array.html  数组名.方法名()
            * push() 向数组的末尾添加一个或更多元素，并返回新的长度
            * pop() 删除数组的最后一个元素并返回删除的元素
            * join() 把数组的所有元素放入一个字符串。
            * forEach() 数组每个元素都执行一次回调函数。
            * indexOf() 搜索数组中的元素，并返回它所在的位置。
            * shift() 删除并返回数组的第一个元素。
            * sort() 对数组的元素进行排序。
            * unshift() 向数组的开头添加一个或更多元素，并返回新的长度
            * every() 检测数值元素的每个元素是否都符合条件。
            * filter() 检测数值元素，并返回符合条件所有元素的数组。
            * some() 检测数组元素中是否有元素符合指定条件
            * splice() 从数组中添加或删除元素
            * map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
    */

    // var arr = [1, 2, 3];

    //push() 向数组的末尾添加一个或更多元素，并返回新的长度
    // arr.push(4);//必须写参数：实参
    // var result = arr.push(4,5,6);

    // console.log('数组内容:[' + arr + ']');
    // console.log('现在的长度是：' + result);


    //pop() 删除数组的最后一个元素并,返回删除的元素
    // arr.pop();//没有参数，调用一次就删除后面一个数据
    // for(var i = 0; i < 3; i++) { //length：3  ；0-3不包含3：总共是3次循环
    //     // arr.pop();
    //     console.log(i);
    //     arr.pop()
    // }
    // console.log('数组内容:[' + arr + ']');


    //join() 把数组的所有元素放入一个字符串。
    // var str = arr.join();//参数可有可无
    // console.log('数组转成字符串：:' + str ); //'1,2,3'
    // var str = arr.join('');
    // console.log('数组转成字符串：:' + str ); //'123'
    // var str = arr.join('-');
    // console.log('数组转成字符串：:' + str ); //'1-2-3'
    // var str = arr.join(' ');
    // console.log('数组转成字符串：:' + str ); //'1 2 3'


    //forEach() 数组每个元素都执行一次回调函数；遍历数组
    var arr = [1, 2, 3];
    // arr.forEach(function(item) { //item:随便命名，但是要复合变量命名规范，item==数组里面的值
    //     console.log('数组打印：' + item)
    // });

     //二维数组
     var arr2 = [
        [1,2,3],
        [4,5,6],
        [7,8,9]
    ];

    arr2.forEach(function(item) {
        // console.log('数组打印：' + item)
        item.forEach(function(val) {
            console.log('数组的值：' + val);
        })
    });

    //indexOf() 搜索数组中的元素，并返回它所在的位置。 找到：返回下标；找不到就返回：-1

    //arr是否含有5
    var index = arr.indexOf(3);
    console.log(index);//?


    //shift() 删除并返回数组的第一个元素
    arr.shift();
    console.log('数组打印：' + arr)

    //sort() 对数组的元素进行排序。
    var arr3 = [3,6,1,8,3,4];
    console.log('排序前：' + arr3);
    arr3.sort(function(n, m) { //第一个参数-第二个参数=升序，反之降序
        return m - n;
    });

    console.log('排序后：' + arr3);



    /*
        数组的方法：https://www.runoob.com/jsref/jsref-obj-array.html  数组名.方法名()
           
            * every() 检测数值元素的每个元素是否都符合条件。
            * filter() 检测数值元素，并返回符合条件所有元素的数组。
            * some() 检测数组元素中是否有元素符合指定条件
            * splice() 从数组中添加或删除元素
            * map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
    */

    var arr = [1, 2, 3, 4];

    //every() 检测数值元素的每个元素是否都符合条件。 返回：布尔值,类似： &&
    //数组的每个元素都大于2吗

    var result = arr.every(function(item) {
        return item > 2;
    });

    console.log('结果是：' + result);//false

    //some() 检测数组元素中是否有元素符合指定条件 ;返回布尔值，类似：||
    //数组里面有大于2的数吗
    var result2 = arr.some(function(item) {
        return item > 2;
    });

    console.log('结果是：' + result2);//false

    //filter() 检测数值元素，并返回符合条件所有元素的数组。过滤数据
    //把数组里面所有偶数找出来
    var newarr = arr.filter(function(item) {
        return item % 2 == 0;
    });

    console.log('原数组arr：' + arr);
    console.log('过滤数组arr：' + newarr);//返回数组  [2]

    //splice() 从数组中添加或删除元素: 在任意位置删除，修改，插入数据

    //参数个数不同，功能不同：参数一是必填参数：起始下标； 参数二：可选参数,代表删除数据的个数；参数三起：可选的，代表要插入的数据

    var arr = [7, 8, 9];
    // arr.splice(0);//删除所有数据
    // arr.splice(1);//从下标1往后删除所有数据  剩下[7s]
    // arr.splice(0,2);//剩下 [9] ,从下标0开始(包括自身),删除后面两个数
    // arr.splice(0,1,4,5,6);//? [4, 5, 6, 8, 9]
    arr.splice(1,1,6);//? 7 6 9 替换
    console.log(arr);


    //map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
    var arr = ['西瓜','荔枝','李子','龙眼'];

    var newarr = arr.map(function(item) {
        //字符串模板 tab键上面的点
        return `<li>${item}</li>`;
    }).join('');

    console.log(arr);
    console.log(newarr);

    var list = document.getElementById('list');
    list.innerHTML = newarr;//字符串


</script>
</html>